<template>
  <!--企业管理 孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松 -->
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 操作区域 -->
        <el-form ref="form" label-width="80px">
          <el-row class="inline-info">
            <el-col :span="8">
              <el-form-item label="标签名称">
                <el-input
                  size="small"
                  v-model="queryData.tags"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-select
                  size="small"
                  v-model="queryData.province"
                  placeholder="请选择"
                  @change="changprovince"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区">
                <el-select
                  size="small"
                  v-model="queryData.city"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="inline-info">
            <el-col :span="8">
              <el-form-item label="企业简称">
                <el-input
                  size="small"
                  v-model="queryData.shortName"
                  placeholder="请输入内容"
                  class="inputW"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <el-input
                  size="small"
                  v-model="queryData.state"
                  placeholder="请输入内容"
                  class="inputW"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-button plain type="primary" @click="qingchu">清除</el-button>
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button type="success" @click="dialogVisible = true"
              >新增用户</el-button
            >
          </el-row>
        </el-form>
        <!-- 记录区 -->
        <el-row class="box">
          <el-alert
            :title="`共${counts}条记录`"
            type="info"
            show-icon
            :closable="false"
          ></el-alert>
        </el-row>

        <!-- 表格区 -->
        <el-row>
          <el-table
            :header-cell-style="{ background: '#fafafa' }"
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column align="center" prop="id" label="序号">
            </el-table-column>
            <el-table-column align="center" prop="number" label="企业编号">
            </el-table-column>
            <el-table-column align="center" prop="shortName" label="企业简称">
            </el-table-column>
            <el-table-column align="center" prop="tags" label="标签">
            </el-table-column>
            <el-table-column align="center" prop="username" label="创建者">
            </el-table-column>
            <el-table-column width="300px" align="center" label="创建日期">
              <template slot-scope="{ row }">
                {{ row.addDate | dayjs }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="remarks" label="备注">
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="{ row }">
                <el-row v-if="row.state === 1"
                  ><el-tag type="success">启用</el-tag>
                </el-row>
                <el-row v-if="row.state === 0">
                  <el-tag type="danger">禁用</el-tag></el-row
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button
                  @click="xiugai(row.id)"
                  type="primary"
                  plain
                  size="small"
                  icon="el-icon-edit"
                  circle
                ></el-button>

                <el-button
                  v-if="row.state === 1"
                  @click="settype(row)"
                  type="warning"
                  plain
                  size="small"
                  icon="el-icon-close"
                  circle
                ></el-button>

                <el-button
                  v-if="row.state === 0"
                  @click="settype(row)"
                  type="success"
                  size="small"
                  icon="el-icon-check"
                  circle
                >
                </el-button>

                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  plain
                  size="small"
                  circle
                  @click="shanchu(row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 分页区 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.page"
            :page-sizes="[2, 5, 10]"
            :page-size="queryData.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-if="dialogVisible"
      :title="formData.id ? '编辑用户' : '增加用户'"
      :visible.sync="dialogVisible"
      width="width"
      @close="dialogBeforeClose"
    >
      <el-form :rules="rules" ref="form" :model="formData" label-width="80px">
        <el-form-item label-width="120px" prop="shortName" label="企业名称">
          <el-input v-model="formData.shortName"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" prop="company" label="所属公司">
          <el-input v-model="formData.company"></el-input>
        </el-form-item>
        <el-form-item prop="province" label-width="120px" label="城市地区">
          <el-select
            v-model="formData.province"
            @change="changprovince"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="formData.city" placeholder="请选择">
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tags" label-width="120px" label="方向(企业标签)">
          <el-input v-model="formData.tags"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" prop="remarks" label="备注">
          <el-input v-model="formData.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getcompanysListApi,
  addCompanysApi,
  getcompanyinfoApi,
  editCompanysApi,
  setcompanytypeApi,
  delCompanysInfoApi,
} from "@/api/sls-companys";
import { provinces, citys } from "@/utils/citys";
export default {
  name: "companys",
  data() {
    return {
      provinces: [], //城市
      citys: [], //地区
      formData: {
        isFamous: true,
      }, //表单数据
      list: [], //渲染数据
      dialogVisible: false, //弹框
      queryData: {
        page: 1, //当前页
        pagesize: 2, //每页显示数据
        tags: "",
      },
      counts: null, //数据总数

      // 校验规则
      rules: {
        shortName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入所属公司", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请输入地域名", trigger: "blur" },
        ],
        tags: [{ required: true, message: "请输入企业标签", trigger: "blur" }],
        remarks: [
          { required: true, message: "请输入企业备注", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.initData();
    this.geiData();
  },
  methods: {
    async initData() {
      let { items, counts } = await getcompanysListApi(this.queryData);
      console.log(items);
      this.list = items;
      this.counts = counts;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.initData();
    },
    dialogBeforeClose() {
      this.formData = "";
    },
    // 表单事件
    async btnOk() {
      this.$refs.form.validate();
      if (this.formData.id) {
        // 修改
        this.formData.isFamous === 1
          ? (this.formData.isFamous = true)
          : (this.formData.isFamous = false);
        editCompanysApi(this.formData);
        this.formData = {}; //清空弹框回显数据/
      } else {
        // 增加
        await addCompanysApi(this.formData);
        this.formData = {}; //清空弹框回显数据/

      }

      this.$message.success(this.formData.id ? "修改成功" : "增加成功");
      this.dialogVisible = false;
      this.initData();
    },
    // 详情回显
    async xiugai(id) {
      // console.log(id);

      this.formData = await getcompanyinfoApi({ id });
      this.dialogVisible = true;
    },
    // 状态修改
    async settype(val) {
      await this.$confirm("确定改变状态?");
      val.state === 1 ? (val.state = 0) : (val.state = 1);
      console.log(val.state);
      const data = {
        id: val.id,
        state: val.state.toString(),
      };
      await setcompanytypeApi(data);
      this.$message.success("状态改变成功!");
      this.initData();
    },

    // 删除功能
    async shanchu(id) {
      await this.$confirm("确认删除?");
      await delCompanysInfoApi(id);
      this.$message.success("删除成功!");
      if (this.queryData.pagesize !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    // 清除
    qingchu() {
      this.queryData = {
        page: 1, //当前页
        pagesize: 2, //每页显示数据
        tags: "",
      };
      this.$message.success("刷新成功");
      this.initData();
    },

    // 获取城市
    async geiData() {
      this.provinces = await provinces();
      // console.log(this.provinces, 111111);
    },
    // 获取地区
    changprovince(province) {
      this.citys = citys(province);
      // console.log(this.citys, 22222);
    },
  },
};
</script>
<style>
.box {
  padding-bottom: 30px;
}

.el-dialog__header {
  background-color: rgb(64, 158, 255);
}
.el-dialog__title {
  color: #fff;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
